<template>
	<view>
		<u-toast ref="uToast" />
		<view class="nav">
			<u-navbar :is-back="true" :back-icon-color="'#fff'" title=" " :background="background"
				:border-bottom="false" :is-fixed="false">
				<view class="nav-slot-wrap-title" slot="right">
					<view @click="changeType">
						{{currentType.name}}
					</view>
					<u-image @click="changeType" width="35rpx" height="35rpx" src="../../static/icon01.png"></u-image>
				</view>
			</u-navbar>
			<image src="/static/member/top_bg@2x.png" mode="widthFix" class="top-bg-img"></image>
		</view>
		<view class="top-bg">
			<image src="/static/member/top_bg@2x.png" mode="widthFix" class="top-bg-img"></image>
		</view>
		<view class="data-box">
			<view class="item">
				<view class="num">
					{{analyse.todaySum}}
				</view>
				<view class="label">
					今日做题
				</view>
			</view>
			<view class="item">
				<view class="num">
					{{analyse.totalSum}}
				</view>
				<view class="label">
					累计做题
				</view>
			</view>
			<view class="item">
				<view class="num">
					{{analyse.totalDay}}
				</view>
				<view class="label">
					学习天数
				</view>
			</view>
		</view>
		<view class="content-box">
			<u-tabs :list="banks" :is-scroll="true" :current="currentBank" @change="bankChange" name="title"
				:bg-color="'rgba(0,0,0,0)'" :show-bar="false" :active-item-style="activeItemStyle"></u-tabs>

			<view class="block-box">

				<view class="block1" @click="openBlock('block1')">
					<view class="info">
						<view class="label">
							章节练习
						</view>
						<view class="desc">
							Go Go Go !
						</view>
					</view>
					<view class="icon">
						<image src="../../static/icon-02.png" mode="widthFix"></image>
					</view>
				</view>

				<view class="row">
					<view class="block2" @click="openBlock('block2')">
						<view class="info">
							<view class="label">
								组卷练习
							</view>
							<view class="desc">
								let's get it
							</view>
						</view>
						<view class="icon">
							<image src="../../static/icon-03.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="col">
						<view class="block3" @click="openBlock('block3')">
							<view class="info">
								<view class="label">
									收藏夹
								</view>
								<view class="desc">
									还没有收藏
								</view>
							</view>
							<view class="icon">
								<image src="../../static/icon-04.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="block4" @click="openBlock('block4')">
							<view class="info">
								<view class="label">
									错题本
								</view>
								<view class="desc">
									还没有错题
								</view>
							</view>
							<view class="icon">
								<image src="../../static/icon-05.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="showType" mode="bottom" height="90%" border-radius="35">
			<view class="popup-box">
				<view class="popup-title">
					题 库 分 类
				</view>
				<view class="type-list">
					<block v-for="(item,index) in types">
						<view class="item" :class="currentType._id==item._id?'active':''" :key="item._id"
							@click="setchangeType(index)">
							{{item.name}}
						</view>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				showType: false,
				background: {
					backgroundColor: "rgba(0,0,0,0)"
				},
				activeItemStyle: {
					color: "#333",
					fontSize: "40rpx",
					fontWeight: "bold"
				},
				currentBank: 0,
				banks: [],
				currentType: { name: "" },
				types: [],
				analyse: {
					todaySum: 0,
					totalSum: 0,
					totalDay: 0,
				}
			}
		},
		onLoad() {
			that = this
			this.getTypes()
			this.getAnalyse()
		},
		methods: {
			getAnalyse() {
				uni.vk.callFunction({
					url: 'client/q_bank/kh/get_bank_analyse',
				}).then(v => {
					this.analyse = v.data
				})
			},
			openBlock(block) {
				let url = ""
				switch (block) {
					case "block1":
						url = "/uni_modules/uce-q-bank/pages/chapters/chapters"
						break
					case "block2":
						url = "/uni_modules/uce-q-bank/pages/mock_exam/mock_exam"
						break
					case "block3":
						url = "/uni_modules/uce-q-bank/pages/f_book/f_book"
						break
					case "block4":
						url = "/uni_modules/uce-q-bank/pages/w_book/w_book"
						break
				}
				uni.vk.navigateTo(url + "?cid=" + this.banks[this.currentBank]._id)
			},
			bankChange(index) {
				this.currentBank = index;
			},
			changeType() {
				this.showType = true
			},
			setchangeType(index) {
				this.currentType = this.types[index]
				uni.setStorageSync('local_bank_type', this.types[index])
				that.getBank(this.types[index]._id)
				this.showType = false
			},
			getTypes() {
				uni.vk.callFunction({
					url: 'client/q_bank/pub/get_types',
					success(data) {
						that.types = data.rows
						let local_bank_type = uni.getStorageSync('local_bank_type')
						if (local_bank_type) {
							that.currentType = local_bank_type
						} else {
							uni.setStorageSync('local_bank_type', data.rows[0])
							that.currentType = data.rows[0]
							local_bank_type = data.rows[0]
						}
						that.getBank(local_bank_type._id)
					},
					fail(e) {
						that.$refs.uToast.show({
							title: e.msg
						})
					}
				});
			},
			getBank(type) {
				uni.vk.callFunction({
					url: 'client/q_bank/pub/get_bank_by_type',
					data: {
						type: type
					},
					success(data) {
						that.banks = data.rows
						that.getBankDetail(data.rows[0]._id)
					},
					fail(e) {
						that.$refs.uToast.show({
							title: e.msg
						})
					}
				});
			},
			getBankDetail(bank_id) {}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgb(247, 248, 250);
	}

	.nav {
		position: sticky;
		top: 0;
		z-index: 999;
		width: 100%;
		background: #104EFF;
		overflow: hidden;

		.u-slot-right,
		.nav-slot-wrap-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			font-family: PingFangSC-Medium, PingFang SC;
			margin-left: 24rpx;
			letter-spacing: 7rpx;
			flex: 1;
			padding-right: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 150rpx;
		}

		.nav-slot-wrap-message {
			position: absolute;
			width: 44rpx;
			height: 44rpx;
			right: 40rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.top-bg-img {
			position: absolute;
			left: 0;
			top: -8rpx;
			width: 750rpx;
			height: 434rpx;
			z-index: -1;
		}
	}


	.top-bg {
		position: absolute;
		width: 750rpx;
		z-index: 1;
		left: 0;
		height: 430rpx;
		// background: #104EFF;
		border-radius: 0 0 10% 10%;
		top: 0;

		.top-bg-img {
			position: absolute;
			left: 0;
			top: -8rpx;
			width: 750rpx;
			height: 434rpx;
			z-index: -1;
		}
	}

	.box-bg-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 702rpx;
		height: 343rpx;
		z-index: 10;
		border-radius: 24px;
	}

	.data-box {
		position: relative;
		z-index: 999;
		padding-top: 40rpx;
		height: 200rpx;
		width: 100%;
		// background: #4CD964;

		display: flex;
		justify-content: center;
		align-items: center;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			width: 33%;

			.num {
				color: #FFFFFF;
				font-weight: bold;
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}

			.label {
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
	}

	.content-box {
		position: relative;
		z-index: 999;
		margin-top: 20rpx;
		background: rgb(247, 248, 250);
		min-height: 300rpx;
		border-radius: 50rpx 50rpx 0 0;
		padding: 20rpx;

		.block-box {
			position: relative;
			padding: 20rpx;

			.block1 {
				position: relative;
				width: 100%;
				background: #FFFFFF;
				border-radius: 15rpx;
				height: 250rpx;
			}

			.row {
				margin-top: 20rpx;
				position: relative;
				width: 100%;
				height: 400rpx;
				display: flex;
				justify-content: space-between;

				.block2 {
					width: 325rpx;
					height: 100%;
					background: #FFFFFF;
					border-radius: 15rpx;
				}

				.col {
					position: relative;
					width: 325rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.block3,
					.block4 {
						position: relative;
						width: 100%;
						height: 190rpx;
						background: #FFFFFF;
						border-radius: 15rpx;
					}
				}
			}
		}

	}

	.block1,
	.block2,
	.block3,
	.block4 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;

		.info {
			.label {
				color: rgb(42, 43, 47);
				font-size: 40rpx;
				font-weight: bold;
			}

			.desc {
				font-size: 28rpx;
				color: rgb(184, 188, 197);
			}
		}

		.icon {
			position: relative;
			width: 70rpx;
			height: 70rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.block2 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		padding: 40rpx;
	}

	.popup-box {
		padding: 40rpx;

		.popup-title {
			color: rgb(42, 43, 47);
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
		}

		.type-list {
			margin-top: 40rpx;

			.item {
				float: left;
				margin: 20rpx;
				font-size: 30rpx;
				letter-spacing: 2rpx;
				padding: 0rpx 30rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				background: #efefef;
			}

			.active {
				background: rgba(114, 160, 255, .5);
				color: rgb(17, 87, 254);
			}
		}
	}
</style>
